/* 高级表单效果 */
.el-form {
  .el-form-item {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 1px;
      background: linear-gradient(to right, #409EFF, #1890ff);
      transition: all 0.4s ease;
      opacity: 0;
    }
    
    &:hover::before {
      width: 100%;
      left: 0;
      opacity: 1;
    }
    
    .el-form-item__label {
      transition: all 0.3s ease;
    }
    
    &:hover .el-form-item__label {
      color: #409EFF;
      font-weight: 500;
    }
  }
  
  .el-input__wrapper, 
  .el-textarea__wrapper {
    transition: all 0.3s ease;
    overflow: hidden;
    
    &:focus-within {
      box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
      transform: translateY(-2px);
    }
  }
  
  .el-input__inner,
  .el-textarea__inner {
    transition: all 0.3s ease;
  }
}

/* 高级表格效果 */
.el-table {
  --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.1);
  
  .el-table__row {
    transition: all 0.3s ease;
    
    td {
      transition: all 0.3s ease;
    }
    
    &:hover {
      transform: translateX(5px);
      
      td:first-child {
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 4px;
          background-color: #409EFF;
        }
      }
    }
  }
  
  .cell {
    position: relative;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(64, 158, 255, 0.2), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }
  
  .el-table__row:hover .cell::after {
    opacity: 1;
  }
}

/* 动态按钮效果 */
.el-button {
  &.el-button--primary {
    position: relative;
    overflow: hidden;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.7);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1, 1) translate(-50%, -50%);
      transform-origin: 50% 50%;
    }
    
    &:focus:not(:active)::after {
      animation: ripple 0.6s ease-out;
    }
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
} 